<template>
	<view class="login-page">
		<view class="form-box">
			<view class="logo-box">
				<image src="/static/logo.png" class="logo"/>
				<view class="title"> 用户登录 </view>
			</view>
			<wd-form ref="formRef" :model="formData">
			  <wd-input
			    label="账号"
			    label-width="100px"
			    prop="username"
			    v-model="formData.username"
			    placeholder="请输入用户名"
			    :rules="[{ required: true, message: '请填写用户名' }]"
			  />
			  <wd-input
			    label="密码"
			    label-width="100px"
			    prop="password"
			    show-password
			    v-model="formData.password"
			    placeholder="请输入密码"
			    :rules="[{ required: true, message: '请填写密码' }]"
			  />
			</wd-form>
			<wd-button class="btn" @tap="login"> 登 录 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { isMobile, isPWD, isNull } from '@/utils/valdate.js'
	import { loginApi } from '@/api'
	import { useUserStore } from '@/store'
	const formRef = ref()
	const formData = ref({
		username: '',
		password: ''
	})
	const rules = {
		username: isNull('账号'),
		password: isNull('密码')
	}

	const login = () => {
		const { SETUSERINFO } = useUserStore()
		formRef.value.validate().then(({ valid }) => {
			if(valid) {
				loginApi({...formData.value}).then(res =>{
					SETUSERINFO(res)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}).catch((err) => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.login-page {
		width: 750rpx;
		height: 100vh;
		padding: 20rpx 24rpx;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		background: url('/static/icon/login-bg.png') no-repeat center center;
		background-size: 100% 100%;
		.form-box {
			padding: 20rpx;
			margin-top: 130rpx;
			border-radius: 20rpx;
			.logo-box {
				text-align: center;
				margin-bottom: 120rpx;
				.logo {
					width: 160rpx;
					height: 160rpx;
					margin-bottom: 36rpx;
				}
				.title {
					color: #333333;
					font-size: 18px;
					font-weight: 500;
				}
			}
			.btn {
				width: 60%;
				margin-top: 70rpx;
				border-radius: 100rpx;
				transform: translateX(32%);
			}
		}
	}
</style>